<template>

  <lay-container :fluid="true" style="padding: 10px">


    <div class="apply">
      <lay-row :space="10">
        <lay-col :md="24" :sm="24" :xs="24">
          <lay-card>
            暂无宿舍？
            <lay-button type="primary" @click="hostelApply">点击申请</lay-button>
          </lay-card>
        </lay-col>
      </lay-row>
      <!--宿舍申请-->
      <lay-layer v-model="visible11" :shade="true" :area="['900px', '600px']">
        <div style="padding: 20px;">
          <lay-form :model="model11" ref="layFormRef11" required>

            <h3 style="text-align: center">请选择一个适合自己的宿舍标签，管理员会按照标签分配宿舍人员</h3>
            <h3 style="text-align: center">没有合适的?
              <lay-button siz="xs" type="normal" @click="openInsertLabel">点击添加</lay-button>
            </h3>
            <lay-form-item label="账户" prop="labelId">

              <div style="height: 250px;overflow: auto;background-color: rgb(239,239,239);padding: 8px">
                <lay-checkcard-group single v-model="model11.labelId">
                  <lay-checkcard
                      v-for="(item,index) in labelList"
                      :key="index"
                      :value="item.id">
                    <template #title>
                      <lay-icon type="layui-icon-note" :color="item.color"/>
                      <lay-tag type="primary" :color="item.color" size="sm">
                        {{ item.name }}
                      </lay-tag>
                      &nbsp;&nbsp;&nbsp;<span>{{ item.remarks }}</span>
                    </template>
                    <template #description>
                    </template>

                  </lay-checkcard>

                </lay-checkcard-group>
              </div>
            </lay-form-item>

          </lay-form>
          <div style="width: 100%; text-align: center">
            <lay-button size="sm" type="primary" @click="toSubmit"
            >保存
            </lay-button
            >
            <lay-button size="sm" @click="toCancelLabel">取消</lay-button>
          </div>
        </div>
      </lay-layer>
      <!--标签添加-->
      <lay-layer v-model="visible12" title="添加标签" :area="['700px', '600px']">
        <div style="padding: 20px">
          <lay-form :model="model12" ref="layFormRef11" required>
            <lay-form-item label="标签名称" prop="name">
              <lay-input v-model="model12.name"></lay-input>
            </lay-form-item>
            <lay-form-item label="标签颜色" prop="color">
              <lay-color-picker v-model="model12.color"></lay-color-picker>
            </lay-form-item>
            <lay-form-item label="描述" prop="remarks">
              <lay-textarea
                  placeholder="请输入描述"
                  v-model="model12.remarks"
              ></lay-textarea>
            </lay-form-item>
          </lay-form>
          <div style="width: 100%; text-align: center">
            <lay-button size="sm" type="primary" @click="toSubmitLabel"
            >保存
            </lay-button
            >
            <lay-button size="sm" @click="toCancel">取消</lay-button>
          </div>
        </div>
      </lay-layer>
    </div>


    <div class="details">

      <lay-row :space="10">
        <!--        顶部-->
        <lay-col :md="24" :sm="24" :xs="24">
          <lay-card>当前xxx楼xx室</lay-card>
        </lay-col>

        <!--左侧-->
        <lay-col :md="6" :sm="6" :xs="6">
          <lay-card v-for="(item,index) in studentList" :key="index" class="student-card">
            <div class="statistics-body">
              <p>{{ item.studentName }}</p>
              <p>{{ item.collegeNameAndClassName }}</p>
            </div>
            <lay-button type="primary" fluid class="detail">查看详情</lay-button>
          </lay-card>
        </lay-col>

        <!--右侧-->
        <lay-col :md="18" :sm="18" :xs="18">
          <lay-card title="宿舍信息">
            <lay-row>
              <lay-col :md="8" :sm="8" :xs="8">
                宿舍标签:
                <lay-tag :color="rightDetails.hostel.labelColor" variant="light">{{ rightDetails.hostel.labelName }}
                </lay-tag>
              </lay-col>
              <lay-col :md="8" :sm="8" :xs="8">
                宿舍规格:{{ rightDetails.hostel.spec }}人间
              </lay-col>
              <lay-col :md="8" :sm="8" :xs="8">
                剩余床位:{{ rightDetails.hostel.surplusBed }}
              </lay-col>
            </lay-row>
          </lay-card>

          <lay-card title="水电费信息">
            <lay-row>
              <lay-col :md="8" :sm="8" :xs="8">
                水费剩余:{{ rightDetails.waterElectricity.water }}
                <span>
                    <lay-button type="primary" size="xs" style="margin-left: 20px"
                                @click="recharge('1')">点击充值</lay-button>
                </span>
              </lay-col>
              <lay-col :md="16" :sm="16" :xs="16">
                本月消耗水费:
              </lay-col>
            </lay-row>
            <br>
            <lay-row>
              <lay-col :md="8" :sm="8" :xs="8">
                电费剩余:{{ rightDetails.waterElectricity.electricity }}
                <span>
                    <lay-button type="primary" size="xs" style="margin-left: 20px"
                                @click="recharge('2')">点击充值</lay-button>
                </span>
              </lay-col>
              <lay-col :md="16" :sm="16" :xs="16">
                本月消耗电费:
              </lay-col>
            </lay-row>
          </lay-card>

          <!--图片信息-->
          <lay-card>
            <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg"
                 style="width:100px;height:100px"
                 @click="openPhoto"/>
            <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg"
                 style="width:100px;height:100px"/>
            <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg"
                 style="width:100px;height:100px"/>
            <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg"
                 style="width:100px;height:100px"/>
            <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg"
                 style="width:100px;height:100px"/>
            <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg"
                 style="width:100px;height:100px"/>

          </lay-card>
        </lay-col>
      </lay-row>

      <!--      水电费充值-->
      <lay-layer v-model="visible13" title="充值" :area="['700px', '600px']">
        <div style="padding: 20px">
          <lay-form :model="model13" ref="layFormRef11" required>

            <lay-form-item label="宿舍id" prop="hostelId" v-show="true">
              <lay-input v-model="model13.hostelId"></lay-input>
            </lay-form-item>

            <lay-form-item label="宿舍id主键" prop="id" v-show="true">
              <lay-input v-model="model13.id"></lay-input>
            </lay-form-item>

            <lay-form-item label="宿舍号" prop="hostelName" v-show="true">
              <lay-input v-model="model13.hostelName"></lay-input>
            </lay-form-item>

            <lay-form-item label="类型" prop="type" v-show="true">
              <lay-input v-model="model13.type"></lay-input>
            </lay-form-item>

            <lay-form-item label="充值金额" prop="quantity" v-show="true">
              <lay-input-number v-model="model13.quantity" size="lg" :min="5" :max="200"></lay-input-number>
            </lay-form-item>

            <lay-form-item label="二维码按钮" v-show="true">
              <lay-button @click="generateQR">点击生成支付二维码</lay-button>
            </lay-form-item>

            <lay-form-item label="支付二维码" v-show="true">
              <lay-qrcode :text="qrcodequantity.content" :width="200" color="#009688"></lay-qrcode>
            </lay-form-item>

          </lay-form>
          <div style="width: 100%; text-align: center">
            <lay-button size="sm" type="primary" @click="toPayment"
            >我已支付
            </lay-button
            >
            <lay-button size="sm" @click="toPaymentCancel">暂未支付</lay-button>
          </div>
        </div>
      </lay-layer>


    </div>

  </lay-container>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {layer} from '@layui/layui-vue'
import {getPage, labelInsert} from "@/api/business/label";
import {hostelApplyInsert, hostelApplyIsCount, hostelRecharge} from "@/api/business/student";
import $ from "jquery";
import {getStudentList} from "@/api/business/live";

onMounted(() => {
//查询该学生是否已经存在了宿舍申请
  getIsCount();
//申请宿舍之查询标签
  getLabelList();
  //$('.apply').hide();
  getStudentListLeft();

})

//
function openPhoto() {
  layer.photos({
    imgList: [
      {src: 'https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg', alt: 'layer for vue'},
      {src: 'https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg', alt: 'layer for vue'},
      {src: 'https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg', alt: 'layer for vue'}
    ]
  })
}

const qrcodequantity = reactive({
  content: ''
})

const searchQuery = reactive({
  hostelId: 1
})

//左侧学生详情数据
const studentList = ref();

//右侧详情数据
const rightDetails = reactive({
  hostel: {
    labelName: '',
    spec: '',
    surplusBed: '',//剩余床位
    labelColor: '',
    hostelId: '',
  },
  waterElectricity: {
    water: '',
    electricity: '',
    thisMonthWater: '',
    thisMonthElectricity: ''
  },
  imgList: []
})

const getStudentListLeft = () => {
//查询宿舍成员
  getStudentList(searchQuery).then(res => {
    if (res.code == 0 && res.data.length > 0) {
      studentList.value = res.data;
    }
  })
}

//申请宿舍之查询标签
const getLabelList = () => {
  let searchQuery = {index: 1, size: 999}
  getPage(searchQuery).then(res => {
    if (res.code == 0 && res.data.records.length > 0) {
      labelList.value = res.data.records;
    }
  })
}

const Single = ref('2')

function openInsertLabel() {
  visible12.value = !visible12.value;
}

const labelList = ref();

//弹层状态
const visible11 = ref(false);

const hostelApply = function () {
  visible11.value = !visible11.value;
}

const model11 = reactive({
  labelId: '',
  createBy: '',
})

const layFormRef11 = ref();


const model12 = reactive({
  name: '',
  color: '',
  remarks: ''
})

//弹层状态
const visible12 = ref(false);

function toSubmitLabel() {
  labelInsert(model12).then(res => {
    if (res.code == 0) {
      layer.msg(res.msg, {icon: 1, time: 3000})
      visible12.value = false
      getLabelList();
    }
  })

}

function toCancel() {
  visible12.value = false
}

function toCancelLabel() {
  visible11.value = false
}

//提交宿舍申请
function toSubmit() {
  model11.createBy = '1'
  hostelApplyInsert(model11).then(res => {
    if (res.code == 0 && res.data == true) {
      layer.msg(res.msg, {icon: 1, time: 3000})
      visible11.value = false
    }
  })
  setTimeout(() => {
    getIsCount();
  }, 1500)

}

//查询当前用户是否存在宿舍申请
const getIsCount = () => {
  let id = '1';
  hostelApplyIsCount(id).then(res => {
    if (res.code == 0 && res.data.applyCount >= 1) {
      //应当显示宿舍详情信息
      $('.details').show();
      $('.apply').hide();
      let studentHostelVo = res.data.studentHostelVo;

      rightDetails.hostel.labelName = studentHostelVo.labelName;
      rightDetails.hostel.hostelId = studentHostelVo.id;
      rightDetails.hostel.spec = studentHostelVo.quantity;//规格
      rightDetails.hostel.labelColor = studentHostelVo.labelColor;//颜色
      rightDetails.waterElectricity.water = studentHostelVo.water;
      rightDetails.waterElectricity.electricity = studentHostelVo.electric;

      //studentList.value.length;//已居住人数
      //studentHostelVo.quantity;//宿舍的规格（可居住人数）
      let surplusBed = studentHostelVo.quantity - studentList.value.length;
      rightDetails.hostel.surplusBed = surplusBed.toString();

    } else if (res.code == 0 && res.data.applyCount == 0) {
      $('.details').hide();
      $('.apply').show();


    }
  })

}

const model13 = reactive({
  type: '',//1水费 2电费
  quantity: 0,//充值金额
  hostelId: '',//宿舍id
  createBy: '',//充值人
})

//弹层状态
const visible13 = ref(false);

//调用充值框
function recharge(type: any) {
  visible13.value = !visible13.value;
  model13.quantity = 0;
  model13.type = type //设置类型
  model13.hostelId = rightDetails.hostel.hostelId;
  model13.createBy = '1';

}

//水电费充值 （1水费，2电费）


function generateQR() {
  let qrQuantity = model13.quantity;
  qrcodequantity.content = qrQuantity.toString();

}

//调用支付接口
function toPayment(type: any) {
  hostelRecharge(model13).then(res => {
    if (res.code == 0 && res.data == true) {
      visible13.value = false
      getIsCount();
      layer.msg(res.msg, { icon : 1, time: 1000})
    } else {
      layer.msg(res.msg, { icon : 1, time: 1000})
    }
  })


}


function toPaymentCancel() {
  visible13.value = false
}

</script>

<style scoped>
.apply {
  text-align: center;
}

.statistics-body {
  padding: 14px 0;
  padding-left: 20px;
}

.detail {
  display: none;
}

.student-card:hover .detail {
  display: block;
}

</style>